<div class="row" id="productoForm">
	<div class="span5" data-bind="visible: !mostrarForm()">
		<div class="alert alert-info">
			<label>Cargando <i class="icon-refresh"></i></label>
		</div>
	</div>
	<div class="span5 well" data-bind="visible: mostrarForm" style="display:none ">
		<h4 data-bind="text: title">Producto</h4>
		<hr>
		<form id="login-form" class="form-horizontal">
		<fieldset data-bind="with: productoNuevo">
			<div class="control-group" data-bind="validationElement: descripcion">
				<label class="control-label" for="inputDescripcion">Descripcion:</label>
				<div class="controls">
					<input type="text" id="inputDescripcion" data-bind="value: descripcion" class="input-large">
					<span class="help-inline error" data-bind="validationMessage: descripcion"></span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label" for="selectGrupo">Grupo:</label>
				<div class="controls">
					<select id="selectGrupo" data-bind="options: $root.grupos, optionsText: 'descripcion', optionsValue: 'id', value: $root.grupo" class="input-large"></select>
				</div>
			</div>
			<div class="control-group" data-bind="validationElement: subgrupo">
				<label class="control-label" for="selectSubgrupo">Subgrupo:</label>
				<div class="controls">
					<select id="selectSubgrupo" data-bind="options: $root.subgruposFiltrados, optionsText: 'descripcion', optionsValue: 'id', value: subgrupo" class="input-large"></select>
					<span class="help-inline error" data-bind="validationMessage: subgrupo"></span>
				</div>
			</div>
			<div data-bind="visible: isAnyMessageShown()" class="alert alert-block" id="errorMsg">
				<h4 class="alert-heading">Error en el formulario!</h4>
				Hay valores invalidos en el formulario.
			</div>
			<div data-bind="visible: $root.mostrarFormError" class="alert alert-error">
				<span data-bind="text: $root.formErrorMensaje"></span>
			</div>			
			<div class="form-actions">
				<button id="registro" class="btn btn-primary" data-bind="click: $root.registro">Salvar</button>
				<button id="registro" class="btn" data-bind="click: $root.volver">Cancelar</button>
			</div>
		</fieldset>
		</form>
		<div data-bind="visible: mostrarSuccess" class="alert alert-success">
			<span data-bind="html: successMensaje"></span>
		</div>
		<div data-bind="visible: mostrarError" class="alert alert-error">
			<span data-bind="text: errorMensaje"></span>
		</div>		
	</div>
</div>
<script language="javascript">
	function NuevoProducto() {
		var self = this;

		self.title = ko.observable("Administrar Producto");
		self.mostrarForm = ko.observable(false);
		self.mostrarSuccess = ko.observable(false);
		self.successMensaje = ko.observable("");
		self.mostrarError = ko.observable(false);
		self.errorMensaje = ko.observable("");
		self.mostrarFormError = ko.observable(false);
		self.formErrorMensaje = ko.observable("");

		self.productoNuevo = ko.validatedObservable(new CProducto());		
		self.grupos = ko.observableArray();
		self.grupo = ko.observable();
		self.subgrupos = ko.observableArray();
		sterilav.cargaListas(self.subgrupos(), "Subgrupos");
		sterilav.cargaListas(self.grupos(), "Grupos");
		self.grupo(self.grupos()[0].id);
		self.subgruposFiltrados = ko.computed(function() {
 			return ko.utils.arrayFilter(self.subgrupos(), function(item) {
            	return item.idgrupo == self.grupo();
        	});		
		}, this);
				
		self.cargar = function() {
			var exito = function(data) {
				if(data.status != "OK") {
				} else {
					self.productoNuevo().descripcion(data.data.descripcion);
					self.productoNuevo().subgrupo(data.data.subgrupo);
					self.grupo(data.data.grupo);
				}
			};
			var falla = function(data) {
			};
			getData("./servidor/sterilav.php?op=getProducto&id=" + amplify.store.sessionStorage("sterilav.productoEditado"),exito,falla);
		};
		
		self.registro = function() {
			self.productoNuevo().errors.showAllMessages(true);
			if (!self.productoNuevo().isValid()) {
				return;
			}
			//Guardar en la base de datos
			self.mostrarFormError(false);
			var exito = function(data) {
				if(data.status != "OK") {
					$("#errorMsg").show();
					$("#errorMsg").append(data.data);
				} else {
					self.mostrarForm(false);
					self.successMensaje(data.data + "<br><a href='#' onclick='abrir();'>Volver</a>");
					self.mostrarSuccess(true);
					amplify.store.sessionStorage("sterilav.productoEditado", null);
				}
			};
			var falla = function(data) {
				if(data.data) {
					self.formErrorMensaje(data.data);
				} else {
					self.formErrorMensaje("Hubo un error tratando de actualizar el producto.");
				}
				self.mostrarFormError(true);				
			};
			var productoCreado = {
				id: amplify.store.sessionStorage("sterilav.productoEditado"),
				descripcion: self.productoNuevo().descripcion(),
				subgrupo: self.productoNuevo().subgrupo()
			};
			var url = "";
			if(amplify.store.sessionStorage("sterilav.productoEditado")) {
				url = "./servidor/sterilav.php?op=updateProducto";
			} else {
				url = "./servidor/sterilav.php?op=putProducto";
			}
			postData(url,exito,falla,productoCreado);
		};

		self.ingreso = function() {
			$("#container").load("./cliente/paginas/login.html");
		};
		self.volver = function() {
			amplify.store.sessionStorage("sterilav.productoEditado", null);		
			window.location.href = "./Index.html";
		};
		
		if(amplify.store.sessionStorage("sterilav.productoEditado")) {
			self.cargar();
		}
		self.mostrarForm(true);
	};

	function CProducto() {
		var self = this;
		
		self.id = ko.observable();
		self.descripcion = ko.observable().extend({required: true});
		self.subgrupo = ko.observable().extend({required: true});
	};

	function abrir() {
		$("#container").load("./cliente/paginas/listaProductos.html");
	}
	
	var productoModelo = new NuevoProducto();
	ko.applyBindings(productoModelo, document.getElementById("productoForm"));  	
</script>